<template>
  <div class="detailPageCss">
    <div class="titleCss">{{ titleNameMap[pageType]}}</div>
    <div class="bodyCss">
      <el-form ref="form" :model="formData" label-width="140px">
        <template v-if="pageType !== 3">
          <el-row>
            <el-form-item label="用工单位名称">
              <el-input v-model="formData.enterpriseName" placeholder="请输入" style="width:240px;" readonly></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="姓名">
              <el-input v-model="formData.personnelName" placeholder="请输入" style="width:240px;" readonly></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="证件号码">
              <el-input v-model="formData.identityNumber" placeholder="请输入" style="width:240px;" readonly></el-input>
            </el-form-item>
          </el-row>
          <el-row v-if="pageType!==2">
            <el-form-item label="体检日期">
              <el-input v-model="formData.examTime" placeholder="请输入" style="width:240px;" readonly></el-input>
            </el-form-item>
          </el-row>
          <el-row v-if="pageType!==2">
            <el-form-item label="报告出具日期">
              <el-input v-model="formData.reportIssueTime" placeholder="请输入" style="width:240px;" readonly></el-input>
            </el-form-item>
          </el-row>
          <el-row v-if="pageType==2">
            <el-form-item label="体检日期">
              <el-input v-model="formData.examTimeStr" placeholder="请输入" style="width:240px;" readonly></el-input>
            </el-form-item>
          </el-row>
          <el-row v-if="pageType==2">
            <el-form-item label="报告出具日期">
              <el-input v-model="formData.reportIssueTimeStr" placeholder="请输入" style="width:240px;" readonly></el-input>
            </el-form-item>
          </el-row>
          <el-row v-if="pageType==0 ||pageType==1">
            <el-form-item label="体检结果">
              <el-input v-model="formData.examResult" placeholder="请输入" style="width:240px;" readonly></el-input>
            </el-form-item>
          </el-row>
          <el-row v-if="pageType==1 ||pageType==2">
            <el-form-item label="工种">
              <el-input v-model="formData.job" placeholder="请输入" style="width:240px;" readonly></el-input>
            </el-form-item>
          </el-row>
          <el-row v-if="pageType==2">
            <el-form-item label="诊断委托机构">
              <el-input v-model="formData.diagnoseOrg" placeholder="请输入" style="width:240px;" readonly></el-input>
            </el-form-item>
          </el-row>
          <el-row v-if="pageType==0">
            <el-form-item label="原工种">
              <el-input v-model="formData.originJobCategory" placeholder="请输入" style="width:240px;" readonly></el-input>
            </el-form-item>
          </el-row>
          <el-row v-if="pageType==0">
            <el-form-item label="调岗工种">
              <el-input v-model="formData.transferJobCategory" placeholder="请输入" style="width:240px;" readonly></el-input>
            </el-form-item>
          </el-row>
          <el-row v-if="pageType==0">
            <el-form-item label="调岗材料">
              <div class="fileCss">
                <!-- <div class="fileItemCss" v-for="(item ,index ) in formData.transferMaterials" :key="index">
                  <el-button type="text">{{ item.fileName }}</el-button>
                </div> -->
                <div class="fileItemCss"  v-if="formData.transferMaterials">
                   <a target="blank" :href="'http://36.137.225.215:7799/prod-api'+formData.transferMaterials">{{ formData.transferMaterialsName ? formData.transferMaterialsName: '调岗材料' }}</a>
                </div>
              </div>
            </el-form-item>
          </el-row>
          <el-row v-if="pageType==1">
            <el-form-item label="疑似职业病报告文件">
              <div class="fileCss">
                <!-- <div class="fileItemCss" v-for="(item ,index ) in formData.transferMaterials" :key="index">
                  <el-button type="text">{{ item.fileName }}</el-button>
                </div> -->
                <div class="fileItemCss"  v-if="formData.reportFile">
                   <a target="blank" :href="'http://36.137.225.215:7799/prod-api'+formData.reportFile">{{ formData.fileName ? formData.fileName: '疑似职业病报告文件' }}</a>
                </div>
              </div>
            </el-form-item>
          </el-row>
          <el-row v-if="pageType==2">
            <el-form-item label="诊断委托材料">
              <div class="fileCss">
                <!-- <div class="fileItemCss" v-for="(item ,index ) in formData.transferMaterials" :key="index">
                  <el-button type="text">{{ item.fileName }}</el-button>
                </div> -->
                <div class="fileItemCss"  v-if="formData.diagnoseFile">
                   <a target="blank" :href="'http://36.137.225.215:7799/prod-api'+formData.diagnoseFile">{{ formData.fileName ? formData.fileName: '诊断委托材料文件' }}</a>
                </div>
              </div>
            </el-form-item>
          </el-row>
        </template>
        <template v-else>
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名">
                <el-input v-model="formData.name" placeholder="请输入" style="width:240px;" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别">
                <el-input :value="typeSex(formData.sex)"  placeholder="请输入" style="width:240px;" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="出生">
                <el-input v-model="formData.birthday" placeholder="请输入" style="width:240px;" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号">
                <el-input v-model="formData.identityNumber" placeholder="请输入" style="width:240px;" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="工作单位">
              <el-input v-model="formData.enterpriseName" placeholder="请输入" style="width:calc( 50% + 310px);" readonly></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="工作岗位">
                <el-input v-model="formData.job" placeholder="请输入" style="width:240px;" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="职业照射种类代码">
                <el-input v-model="formData.irradiationType" placeholder="请输入" style="width:240px;" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="单位地址">
              <el-input v-model="formData.enterpriseAddr" placeholder="请输入" style="width:calc( 50% + 310px);" readonly></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="联系电话">
              <el-input v-model="formData.phone" placeholder="请输入" style="width:240px;" readonly></el-input>
            </el-form-item>
          </el-row>
          <div class="labelNameCss">放射工作经历记录</div>
          <div class="tableCss">
            <el-table
              max-height="220"
              :data="tableData"
              border
              style="width: 100%">
              <el-table-column
                prop="jobDate"
                label="日期"
                min-width="100">
              </el-table-column>
              <el-table-column
                prop="enterpriseName"
                label="工作单位"
                min-width="200">
              </el-table-column>
              <el-table-column
                prop="job"
                label="工作岗位"
                min-width="140">
              </el-table-column>
              <el-table-column
                prop="irradiationType"
                label="职业照射种类代码"
                min-width="100">
              </el-table-column>
              <el-table-column
                prop="verifyStatus"
                label="状态"
                min-width="100">
                <template #default="scope">
                  {{ table1data5Map[scope.row.verifyStatus] }}
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!--<div class="labelNameCss">放射工作经历记录2</div>
          <div class="tableCss">
            <el-table
              max-height="220"
              :data="tableData2"
              border
              style="width: 100%">
              <el-table-column
                prop="data1"
                label="日期"
                min-width="100">
              </el-table-column>
              <el-table-column
                prop="data2"
                label="工作单位"
                min-width="200">
              </el-table-column>
              <el-table-column
                prop="data3"
                label="工作岗位"
                min-width="140">
              </el-table-column>
              <el-table-column
                prop="data4"
                label="职业照射种类代码"
                min-width="100">
              </el-table-column>
              <el-table-column
                prop="data5"
                label="状态"
                min-width="100">
                <template #default="scope">
                  {{ table1data5Map[scope.row.data5] }}
                </template>
              </el-table-column>
            </el-table>
          </div>-->

        </template>
      </el-form>
    </div>
    <div class="bottomBtnCss">
      <el-button @click="goBackBtn">返回</el-button>
    </div>
  </div>
</template>

<script>
import { getCurrentDay } from '@/utils/business.js'
import { getTransferpositionList,getSuspectDisease,
  getDiagnoseProxy,getStaffJobs,getStaffCertifications } from '@/api/zhangping/personDetail'
export default {
  dicts: [ 'sys_user_sex'],
  props:{
    pageType:{
      type:Number,
      default:()=> 0,
    }
  },
  data(){
    return{
      formData:{},
      titleNameMap:{
        0:'查看调岗材料',
        1:'查看疑似职业病报告',
        2:'查看诊断委托材料',
        3:'查看放射卫生工作人员证',
      },
      tableData:[],
      table1data5Map:{
        0:'通过',
        1:'不通过',
      },
      tableData2:[],
      table2data5Map:{
        0:'通过',
        1:'不通过',
      },
    }
  },
  mounted(){
    this.init()
    this.getList()
  },
  methods:{
    typeSex(value) {
      return this.selectDictLabel(this.dict.type.sys_user_sex, value);
    },
    async getList(){
      if (this.pageType==0) {
        getTransferpositionList({staffId:this.$route.query.info.id,}).then(res=>{
            console.log(res);
            if (res.code=='200') {
              this.formData=res.data
            }
          }
        )
      } else if (this.pageType==1) {
        getSuspectDisease({
          staffId:this.$route.query.info.id,
        }).then(res=>{
          if (res.code=='200') {
            this.formData=res.data
          }
        })
      } else if (this.pageType==2) {
        getDiagnoseProxy({
          staffId:this.$route.query.info.id,
        }).then(res=>{
          if (res.code=='200') {
            this.formData=res.data
          }
        })
      } else if (this.pageType==3) {
        await getStaffCertifications({
          staffId:this.$route.query.info.id,
          pageSize:10,
          pageNum:1
        }).then(res=>{
          if (res.code=='200') {
            this.formData=res.data
            getStaffJobs({
              identityNumber:res.data.identityNumber,
              pageSize:10,
              pageNum:1
            }).then(res=>{
              if (res.code=='200') {
                this.tableData=res.rows
              }
              
            })
          }
        })
      }

    },
    init(){
      this.formData.data1 = '【测试数据】福建超瓷新型材料有限公司'
      this.formData.data2 = '张三'
      this.formData.data3 = '3569874521456325874'
      this.formData.data4 = getCurrentDay()
      this.formData.data5 = getCurrentDay()
      this.formData.data6 = '职业禁忌'
      this.formData.data7 = '石棉制品工'
      this.formData.data8 = 'XXXXX工'
      const random = Math.floor( Math.random() * 30 ) + 4
      this.formData.data9 = []
      for( let i=0;i<random;i++){
        this.formData.data9.push({
          fileName: `材料${i+1}xxxxxxxxx`
        })
      }
      this.formData.data21 = '男'
      this.formData.data31 = '1990-09-08'
      this.formData.data32 = '【测试数据】XXXXXXXX单位'
      this.formData.data33 = '【测试数据】口腔科放射诊断'
      this.formData.data34 = '2B'
      this.formData.data35 = '【测试数据】xxxxxxxxxxxxxxxxxx单位地址'
      this.formData.data36 = '15122223333'
    },
    goBackBtn(){
      this.$router.back()
    },
  },
}
</script>

<style lang="scss" scoped>
.detailPageCss{
  overflow: hidden;
  position: relative;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  height: calc( 100vh - 66px - 40px);
  display: flex;
  flex-direction: column;
  .titleCss{
    text-align: center;
    font-size: 18px;
    font-weight: bold;
  }
  .bodyCss{
    margin-top: 40px;
    width: calc( 100% - 40px);
    padding-right: 20px;
    margin-left: 10px;
    height: calc( 100% - 120px);
    overflow-y: auto;
    padding-bottom: 20px;
    .el-form{
      .labelNameCss{
        font-weight: bold;
        text-align: right;
        padding-right: 12px;
        width: 140px;
        font-size: 14px;
        color: #606266;
      }
      .tableCss{
        margin-left: 20px;
        margin-top: 10px;
        position: relative;
        &:not(:last-child){
          padding-bottom: 22px;
        }
      }
      .fileCss{
        width: 300px;
        height: 150px;
        overflow-y: auto;
        .fileItemCss{
          position: relative;
          a{
            color: #1890ff;
          }
        }
      }
    }
  }
  .bottomBtnCss{
    margin-top: auto;
    text-align: right;
  }
}
</style>
